<%@ page language="java" isELIgnored="false" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<html>
<head>
<title>首页</title>
    <style>
        #fgDiv {
            display: none;
        }
    </style>
</head>

<body>

<h2>我是服务器：${pageContext.request.localPort}</h2>
<h2>当前sessionId：${pageContext.session.id}</h2>
<br>
<br>
<br>

<input type="button" value="添加" id="btnAdd" />
<table  id="list" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>地址</th>
        <th>电话</th>
        <th>操作</th>
    </tr>
</table>



<div id="fgDiv" >
    <input type="hidden" id="hidId" />
    姓名：<input type="text" id="name" />
    <br>
    地址：<input type="text" id="address" />
    <br>
    电话：<input type="text" id="phone" />
    <br>
    <input type="button" id="btnSave" value="保存" />
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script>
    // 查询整个列表
    function queryAll() {

        clearTable();
        $.ajax({
            url: '${pageContext.request.contextPath}/resume/findAll',
            type: 'GET',
            contentType: 'application/json;charset=utf-8',
            dataType: 'json',
            success: function (data) {
                //生成表格数据
                $.each(data, function (index, item) {
                    $('<tr id="tr' + item.id + '"><td>'
                        + item.id + '</td><td>'
                        + item.name + '</td><td>'
                        + item.address + '</td><td>'
                        + item.phone + '</td><td><input type="button" value="编辑"  onclick="update('+item.id+')"/>'
                        +'<input type="button" value="删除" onclick="del('+item.id+')"/></td></tr>').appendTo($("#list"));
                });
            }
        })
    }

    function clearTable(){
        var table = document.getElementById("list");
        var rows = table.rows.length;
        //清空表中的行和列
        for(var a=1; a<rows; a++){
            $("table tr").eq(1).remove();
        }
    }
    queryAll();

    $("#btnAdd").click(function () {
        //显示添加界面
        // $("#bgDiv").css("display", "block");
        $("#fgDiv").css("display", "block");

        //打开的清除文本框中的数据
        //$("#fgDiv input[type=text]").val('');
        $("#fgDiv :text,:hidden").val('');
    });
    //保存
    $("#btnSave").click(function () {
        var data = JSON.stringify({
            "id":$("#hidId").val(),
            "name":$("#name").val(),
            "address":$("#address").val(),
            "phone":$("#phone").val()
        });
        $.ajax({
            url: '${pageContext.request.contextPath}/resume/save',
            type: 'POST',
            data:data,
            contentType: 'application/json;charset=utf-8',
            dataType: 'json',
            success: function (data) {
                if(data){
                    //重新加载页面
                    location.reload();
                }
            }
        });

        //隐藏界面

        $("#fgDiv").css("display", "none");
    });
    function update(id){
        //显示添加界面

        $("#fgDiv").css("display", "block");
        var tds = $("#tr" + id).children('td');
        //设置文本框的值
        $("#hidId").val(tds[0].innerHTML);//隐藏域存放修改之前的行的ID编号值
        $("#name").val(tds[1].innerHTML);
        $("#address").val(tds[2].innerHTML);
        $("#phone").val(tds[3].innerHTML);

    }
    function del(id) {
        $.ajax({
            url: '${pageContext.request.contextPath}/resume/delete/'+id,
            type: 'GET',
            contentType: 'application/json;charset=utf-8',
            dataType: 'json',
            success: function (data) {
                if(data){
                    queryAll();
                }
            }
        })
    }
    
</script>

</body>

</html>